<template>
	<view class="container">
		<!-- 自定义导航栏 -->
		<!-- position: fixed; -->
		<view
			style="display: flex; align-items: center; width: 100%; box-sizing: border-box; top: 0; left: 0; padding-left: 30rpx; background-color: #fff; z-index: 99"
			:style="{ height: navheight + 'px', 'padding-top': hometop + 'px' }">
			<view @click="gochangecity">
				<image src="../../static/loginimg/position.png"
					style="width: 30rpx; height: 30rpx; vertical-align: middle" mode=""></image>
				<text>{{ currentcity ? currentcity : '请选择' }}</text>
			</view>
			<view style="font-weight: bold; font-size: 36rpx; color: #151515; margin-left: 170rpx">趣玩搭</view>
			<view></view>
		</view>
		<!-- 站位盒子 -->
		<view :style="{ height: navheight + 'px', width: '100%' }"></view>
		<!-- /搜做框 -->
		<view class="search" @click="gosearch">
			<image src="../../static/messageimg/d5.png" style="width: 28rpx; height: 28rpx; padding-right: 12rpx"
				mode=""></image>
			<text style="font-weight: 400; font-size: 24rpx; color: #9e9b9d">请搜索您想要的内容</text>
		</view>
		<!-- 轮播图 -->
		<swiper class="swiper" circular :autoplay="true" :interval="1500" :duration="2000"
			style="width: 690rpx; height: 280rpx">
			<swiper-item style="width: 100%; height: 100%" @click="godetail(item)" v-for="item in swiperlist"
				:key="item.id">
				<image :src="img_url + item.image" style="width: 100%; height: 100%" mode="aspectFill"></image>
			</swiper-item>
		</swiper>

		<!-- 分类 -->
		<view style="display: flex; flex-wrap: wrap; margin-bottom: 10rpx; width: 100%; margin-top: 30rpx">
			<!-- 每一项 -->
			<view v-for="(item, index) in grouptype" @click="choosetype(item)" :key="item.id"
				style="width: 25%; height: 180rpx">
				<image :src="img_url + item.image" style="width: 100%; height: 96rpx" mode="aspectFill"></image>
				<!-- <text style="position: absolute; top: 12rpx; left: 12rpx">{{ item.category_name }}</text> -->
				<view style="text-align: center">{{ item.category_name }}</view>
				<!--  <image src="../../static/indeximg/indexmore.png" style="width: 24rpx; height: 24rpx; position: absolute; bottom: 8rpx; left: 12rpx" mode=""></image> -->
			</view>
		</view>
		<!-- 群列表 -->
		<view class="item" :style="{ background: colorlist[i.colorindex] }" v-for="(i, k) in grouplist" :key="k"
			@click="jia(i)">
			<image :src="img_url + i.group_avatar" style="width: 112rpx; height: 112rpx; border-radius: 50%"
				mode="aspectFill"></image>
			<view style="width: 496rpx; padding: 0 24rpx; box-sizing: border-box">
				<view style="font-weight: bold; font-size: 32rpx; color: #151515">{{ i.group_name }}</view>
				<view
					style="font-weight: 400; font-size: 24rpx; color: #666666; width: 496rpx; overflow: hidden; white-space: nowrap; text-overflow: ellipsis">
					{{ i.bulletin }}
				</view>
			</view>
			<uni-icons type="right" size="25" color="#000"></uni-icons>
		</view>
		<view style="width: 100%; text-align: center; font-size: 40rpx; margin-top: 200rpx; font-weight: blod"
			v-if="!currentcity">请先在左上角选择城市</view>
		<!--站位盒子 -->
		<view style="height: 156rpx"></view>
		<!-- 弹框 -->
		<uni-popup ref="popup" type="center">
			<view class="box">
				<view style="position: relative; top: 0; left: 0">
					<image src="../../static/indeximg/pupopbgc.png" style="width: 580rpx; height: 232rpx" mode="">
					</image>
					<view
						style="font-weight: 400; font-size: 32rpx; color: #151515; position: absolute; top: 28rpx; left: 194rpx">
						申请进入群组</view>
					<view style="display: flex; align-items: center; position: absolute; top: 92rpx; left: 80rpx">
						<image :src="img_url + groupobj.group_avatar"
							style="width: 112rpx; height: 112rpx; border-radius: 50%" mode="aspectFill"></image>
						<view
							style="font-weight: bold; font-size: 36rpx; color: #151515; padding-left: 24rpx; width: 320rpx; text-overflow: ellipsis; overflow: hidden; white-space: nowrap">
							{{ groupobj.group_name }}
						</view>
					</view>
				</view>
				<view style="display: flex; align-items: center; justify-content: space-evenly">
					<view @click="$refs.popup.close()" style="
              width: 192rpx;
              height: 68rpx;
              background: #f8f8f8;
              border-radius: 34rpx 34rpx 34rpx 34rpx;
              font-weight: 400;
              font-size: 24rpx;
              color: #666666;
              text-align: center;
              line-height: 68rpx;
            ">
						取消
					</view>
					<view style="
              width: 192rpx;
              height: 68rpx;
              background: #37c1ff;
              border-radius: 34rpx 34rpx 34rpx 34rpx;
              font-weight: 400;
              font-size: 24rpx;
              color: #ffffff;
              text-align: center;
              line-height: 68rpx;
            " @tap="applyGroup">
						发送申请
					</view>
				</view>
			</view>
		</uni-popup>

		<uni-popup ref="refcity" type="bottom">
			<view class="box2">
				<veiw class="header">
					<view style="color: #afa6ab" @click="$refs.refcity.close()">取消</view>
					<view style="font-size: 30rpx; color: #1d202c; font-weight: 800">选择你居住的城市</view>
					<view style="color: #26a089" @click="savedate">确定</view>
				</veiw>
				<!-- 选择器 -->
				<picker-view :indicator-style="indicatorStyle" :value="value" @change="bindChange" class="picker-view">
					<picker-view-column>
						<view class="item2" v-for="(item, index) in province" :key="index">{{ item.name }}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item2" v-for="(item, index) in city[0].children" :key="index">{{ item.name }}
						</view>
					</picker-view-column>
				</picker-view>
			</view>
		</uni-popup>

		<!-- d底部组件 -->
		<TabBar @choosetab="choosetab" :tabbarindex="tabbarindex"></TabBar>
		<push v-if="showpush" @closeshowpush="closepush" @gopush="gopush"></push>
	</view>
</template>

<script>
	import push from '@/components/pushact.vue';
	import TabBar from '@/components/tabbar.vue';
	export default {
		components: {
			TabBar,
			push
		},
		data() {
			return {
				indicatorStyle: `height: 50px;`,
				grouptype: [],
				colorlist: [
					'linear-gradient( 140deg, #FFE9F1 0%, #FFEEFD 100%)',
					'linear-gradient( 140deg, #F2F7FF 0%, #F3E9FF 100%)',
					'linear-gradient( 140deg, #EEFFF6 0%, #D9F3FF 100%)',
					'linear-gradient( 140deg, #FFEFF2 0%, #FFF5DC 100%)',
					'linear-gradient( 140deg, #FEF2EA 0%, #FAFFE6 100%)'
				],
				provinceidnex: 0,
				province: [],
				userprovince: '', // 用户的城市
				value: [0, 1],
				cityindex: 0,
				swiperlist: [],
				currentcity: '',
				tabbarindex: 1,
				hometop: '',
				navheight: '',
				showpush: false, // 显示发布
				search: '',
				city_id: '',
				grouplist: [],
				img_url: this.img_url,
				groupobj: {}
			};
		},
		onReachBottom() {
			console.log('触底了');
		},
		onLoad() {
			const app = getApp();

			// this.getcitylist();
			this.hometop = app.globalData.capsule.top; // 胶囊到顶部的距离
			this.navheight = (app.globalData.capsule.top - app.globalData.system.statusBarHeight) * 2 + app.globalData
				.capsule.height + app.globalData.system.statusBarHeight; // 头部盒子的高度
		},
		onShow() {
			if (uni.getStorageSync('currentcity') && uni.getStorageSync('cityid')) {
				this.currentcity = uni.getStorageSync('currentcity');
				this.city_id = uni.getStorageSync('cityid');
				this.http('/group/getGroupList', {
					city_id: this.city_id,
					search: this.search
				}).then((res) => {
					this.grouplist = res.data;
					this.grouplist.forEach((item, index) => {
						const colorIndex = index % this.colorlist.length;
						item.colorindex = colorIndex;
					});
				});
			}
			// 群分类
			this.getgrouptype();
			// 轮播图
			this.getswiper();
			// 个人资料
			if (uni.getStorageSync('token')) {
				this.getuserinfo();
			}
			this.getcitylist();
		},
		computed: {
			city() {
				return this.province.filter((item) => {
					return item.name == this.province[this.provinceidnex].name;
				});
			}
		},
		methods: {
			// 切换城市
			gochangecity() {
				uni.navigateTo({
					url: '/pages/changecity/changecity'
				});
			},
			jia(e) {
				// console.log(e);
				// return;
				if (e.is_join) {
					uni.navigateTo({
						url: '/message/groupmsg/groupmsg?id=' + e.id
					});
				} else {
					this.$refs.popup.open();
				}

				this.groupobj = e;
			},
			// 保存城市
			async savedate() {
				this.currentcity = this.province[this.provinceidnex].children[this.cityindex].name;
				uni.setStorageSync('currentcity', this.currentcity);
				this.city_id = this.province[this.provinceidnex].children[this.cityindex].id;
				this.http('/group/getGroupList', {
					city_id: this.city_id,
					search: this.search
				}).then((res) => {
					this.grouplist = res.data;
					this.grouplist.forEach((item, index) => {
						const colorIndex = index % this.colorlist.length;
						item.colorindex = colorIndex;
					});
				});
				uni.setStorageSync('cityid', this.city_id);
				this.$refs.refcity.close();
			},
			// 获取城市列表
			async getcitylist() {
				const res = await this.http('/group/getCityList');
				this.province = res.data;
				// console.log('城市列表', this.province);
				let currentprovincearr = [];
				currentprovincearr = res.data.filter((item) => {
					return item.name == this.userprovince;
				});
				console.log('currentprovincearr-------', currentprovincearr);
				currentprovincearr[0].children.forEach((item) => {
					if (item.name == this.currentcity) {
						this.city_id = item.id;
					}
				});
				console.log('城市的id', this.city_id);
				// 群列表
				this.gethome();
				uni.setStorageSync('cityid', this.city_id);
			},
			// 切换
			bindChange(e) {
				// 省份的index
				// console.log(e.detail.value[0]);
				this.provinceidnex = e.detail.value[0];
				this.cityindex = e.detail.value[1];
			},
			// 获取个人资料
			async getuserinfo() {
				const res = await this.http('/user/infor');
				// console.log('个人资料', res);
				if (uni.getStorageSync('currentcity')) {
					this.currentcity = uni.getStorageSync('currentcity');
				} else {
					this.currentcity = res.data.citys;
				}
				this.userprovince = res.data.province;
			},
			// 跳转到搜索
			gosearch() {
				uni.navigateTo({
					url: '/index/search/search'
				});
			},
			// 获取首页轮播图
			async getswiper() {
				const res = await this.http('/index/banner');
				// console.log(res);
				this.swiperlist = res.data;
			},
			// 获取群分类
			async getgrouptype() {
				const res = await this.http('/group/getGroupCategoryList');
				console.log('获取群分类', res);
				this.grouptype = res.data;
			},
			// 获取群列表
			applyGroup() {
				this.http('/group/applyGroup', {
					group_id: this.groupobj.id
				}).then((res) => {
					this.$refs.popup.close();
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
				});
			},
			gethome() {
				this.http('/group/getGroupList', {
					city_id: this.city_id,
					search: this.search
				}).then((res) => {
					this.grouplist = res.data;
					this.grouplist.forEach((item, index) => {
						const colorIndex = index % this.colorlist.length;
						item.colorindex = colorIndex;
					});
					console.log('群列表-----', this.grouplist);
				});
			},
			closepush(status) {
				this.showpush = status;
			},
			// 切换tab
			choosetab(index) {
				console.log(index);
				if (index != 5) {
					this.tabbarindex = index;
				}
				if (index == 1) {
					uni.redirectTo({
						url: '/pages/index/index'
					});
				}
				if (index == 2) {
					uni.redirectTo({
						url: '/dynamic/index/index'
					});
				}
				if (index == 3) {
					uni.redirectTo({
						url: '/message/index/index'
					});
				}
				if (index == 4) {
					uni.redirectTo({
						url: '/my/index/index'
					});
				}
				if (index == 5) {
					this.showpush = true;
				}
			},
			//发布动态
			gopush(index) {
				if (index == 1) {
					// 发布活动
					uni.navigateTo({
						url: '/pages/pushactive/pushactive'
					});
				}
				if (index == 2) {
					// 发布动态
					uni.navigateTo({
						url: '/pages/pushdynamic/pushdynamic'
					});
				}
			},
			// 跳转分类
			choosetype(item) {
				uni.navigateTo({
					url: '/index/search/search?title=' + JSON.stringify(item)
				});
			},
			//轮播详情
			godetail(item) {
				uni.navigateTo({
					url: '/index/swiperdetail/swiperdetail?data=' + encodeURIComponent(item.content)
				});
			}
		},
		onHide() {
			this.showpush = false;
		},
		onUnload() {
			this.showpush = false;
		}
	};
</script>
<style lang="scss" scoped>
	.picker-view {
		width: 680rpx;
		height: 600rpx;
		margin-top: 20rpx;

		picker-view-column {
			z-index: 99 !important;
		}
	}

	.container {
		padding: 0 20px;
		font-size: 14px;
		line-height: 24px;

		.box2 {
			box-sizing: border-box;
			width: 750rpx;
			height: 800rpx;
			border-radius: 18rpx 18rpx 0rpx 0rpx;
			padding: 30rpx;
			background-color: #fff;

			.header {
				display: flex;
				align-items: center;
				justify-content: space-evenly;
			}

			.item2 {
				line-height: 100rpx;
				text-align: center;
			}
		}

		.search {
			box-sizing: border-box;
			display: flex;
			align-items: center;
			margin: 6rpx 0 16rpx 0;
			width: 690rpx;
			height: 68rpx;
			background: #f1edf0;
			border-radius: 32rpx 32rpx 32rpx 32rpx;
			padding-left: 24rpx;
		}

		.box {
			box-sizing: border-box;
			width: 580rpx;
			height: 340rpx;
			border-radius: 30rpx;
			background: #ffffff;
			box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.16);
		}

		.item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			box-sizing: border-box;
			width: 690rpx;
			height: 160rpx;
			padding: 24rpx 16rpx;
			background: linear-gradient(140deg, #ffe9f1 0%, #ffeefd 100%);
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			margin-bottom: 16rpx;
		}
	}

	.uni-searchbar__box {
		justify-content: flex-start !important;
	}
</style>